import React, { Component } from 'react'
import {Card, Button, Input} from 'antd'

//UI界面组建
export default class Products extends Component {
    state = {
        newValue : ''
    }
    getNewValue = (e) =>{
        console.log(e)
    }
    getList= (event) => {
        const currentProduct = {
            name : '香蕉你个banana'
        }
        console.log('谁让你点我了')
        this.props.dispatch({
            type : 'product/updateList',
            payload : currentProduct
        })
    }
    render() {
        console.log(this.props)
        const { productList,dispatch } = this.props
        return (
            <div>
                <div>
                    {
                        productList.map((product,index)=>{
                            return <Card title={'商品 '+index}
                             style={{margin:'20px auto',width:'80%',fontSize:25}}>
                                <Input value={product.name} key={index} style={{width:200}}></Input>
                                <Button type='primary' style={{marginLeft:50}}>修改</Button>
                                <Button type='danger' style={{marginLeft:30}}>删除</Button>
                            </Card>
                        })
                    }
                    <Input style={{width:240,marginLeft:'10%'}} onChange={this.getNewValue}/>
                    <Button type='primary' onClick={this.getList} style={{marginLeft:50}}>添加商品</Button>
                </div>
            </div>
        )
    }
}
